<template>
  <div class="edit-gender">
    <van-picker
      title="性别"
      show-toolbar
      :default-index="defaultIndex"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import { updateUserInfo } from "@/api/user";

export default {
  name: "EditGender",
  components: {},
  props: {
    // v-model的
    value: {
      type: Number
    },
    // .sync 修饰
    gender: {
      type: Number
    }
  },
  data() {
    return {
      columns: ['男', '女'],
      defaultIndex: this.gender
    }
  },
  computed: {},
  watch: {},
  methods: {
    async onConfirm(value, index) {
      console.log('完成',value,index);
      this.$toast({
        message: "修改中...",
        forbidClick: true
      })
      try {
       const {data} = await updateUserInfo({
         gender: index
       });
       console.log(data);
       this.$toast.success('保存成功')
      } catch (err) {
        if (err && err.response && err.response.status) {
          // this.$toast.fail("昵称重复")
          // console.log('修改失败',err.response.status);
        }
      }
      this.$emit('update:gender', index)
      this.$emit('close')
    },
    // onChange(picker, value, index) {
    //   console.log('变化',value,index);
    // },
    onCancel() {
      this.$emit('close')
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
//@import url(); 引入公共css类
</style>
